<div class="sky-container sky-container-grey">
  <app-header [headline]="'title.pending-txs' | translate"></app-header>

  <app-loading-content
    [isLoading]="!transactions"
    noDataText="pending-txs.none"
    *ngIf="!transactions || transactions.length === 0"
  ></app-loading-content>

  <div class="container" *ngIf="transactions && transactions.length > 0">
    <div class="-table">
      <div class="-headers">
        <div class="-flex-fill">{{ 'pending-txs.txid' | translate }}</div>
        <div class="-width-150">{{ 'coin' | commonText }}</div>
        <div class="-width-150">{{ 'hours' | commonText }}</div>
        <div class="-width-150">{{ 'pending-txs.timestamp' | translate }}</div>
      </div>
      <div class="-body">
        <div class="-row" *ngFor="let tx of transactions">
          <div class="-flex-fill -txid">{{ tx.txid }}</div>
          <div class="-width-150">{{ tx.amount | amount:true:'first' }}</div>
          <div class="-width-150">{{ tx.hours | amount:false:'first' }}</div>
          <div class="-width-150 -timestamp">{{ tx.timestamp | dateTime }}</div>
        </div>
      </div>
    </div>
  </div>
</div>
